import React, {useEffect } from "react"
import "./My.scss"
import { useObserver } from "mobx-react-lite"
import useStore from "../../context/useStore"
import { myFace } from "../../utils/interface"
import { useHistory } from "react-router-dom"
const My: React.FC = () => {
    let { mine } = useStore()
    let History = useHistory()
    useEffect(() => {
        mine.getUserInfo()
    }, [mine])
    function goCompile() {
        History.push({
            pathname: "/goCompile",
            state:{
                ...mine.info
            }
        })
    }
    return useObserver(() => <div className='my'>
        <div className='header' onClick={goCompile}>
            <div className='img'>
                <img src={(mine.info as myFace).avatar} alt="" />
            </div>
            <div className='myBody'>
                <p>{(mine.info as myFace).nickname}</p>
                <p>{(mine.info as myFace).mobile}</p>
            </div>
            <div className='myDetail'>
                {
                    '>'
                }
            </div>
        </div>
        <h3>我的服务</h3>

    </div>)
}
export default My